<template>
    <view class="mine-container" :style="{ height: `${windowHeight}px` }">
        <view class="integral-details">
            <view class="integral-list" v-if="list.length > 0">
                <view class="card" v-for="(item, index) in list" :key="index">
                    <view style="display: flex;flex: 4;">
                        <view class="text-container">
                            <view
                                style="display: flex;align-items: center;align-items: center;">
                                <view class="label-planname">{{ item.trainName }}</view>
                                <view class="label-score"  >{{item.totalScore}}分</view>
                                <view class="label-icon">
                                    <u-tag v-if="item.isPass == 1" text="合格" plain plainFill size="mini" type="success"
                                        shape="circle"></u-tag>
                                        <u-tag v-else text="不合格" plain plainFill size="mini" type="error"
                                        shape="circle"></u-tag>
                                    </view>

                            </view>
                            <view>
                                <span class="time">{{ item.createTime }}</span>
                            </view>
                        </view>
                    </view>
                    <view style="margin-right: 20rpx;">
                        <u-button 
                            color="linear-gradient(to right,rgb(22, 93, 255), rgb(106, 161, 255))" 
                            shape="circle"
                            customStyle="width: 140rpx; height: 60rpx; line-height: 60rpx; font-size: 20rpx"
                            @click="gotoReview(item)">
                            答题回顾
                        </u-button>
                    </view>
                </view>
                <view>
                    <u-loadmore @loadmore="loadmore" :status="status" />
                </view>
            </view>
            <view v-else>
                <u-empty mode="data">
                </u-empty>
            </view>
        </view>
    </view>
</template>

<script>
import storage from '@/utils/storage'
import { studentTrainRecordList } from '@/api/train/index.js'
export default {
    data() {
        return {
            name: this.$store.state.user.name,
            version: getApp().globalData.config.appInfo.version,
            src: "/static/images/qrcode.png",
            status: "loadmore",
            list: [],
            pageNum: 1,
            pageSize: 10,
            listHeight: 0 // 新增高度计算变量
        }
    },
    computed: {
        windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
        }
    },
    mounted() {
        this.loadList();
    },
    methods: {

        async loadList() {
            const { rows, total, code, msg } = await studentTrainRecordList({ pageNum: this.pageNum, pageSize: this.pageSize });
            if (code == 200) {
                // 合并新旧数据（使用扩展运算符）
                this.list = [...this.list, ...rows];
                // 根据是否还有数据更新状态
                this.status = this.list.length >= total ? "nomore" : "loadmore";
            }
        },
        loadmore() {
            if (this.status === "nomore") return;
            this.pageNum++;
            this.status = "loading";
            this.loadList();
        },
        gotoReview(item) {
            uni.navigateTo({ 
                url: `/pagesC/trainingRecord/answerReview/index?trainRecordId=${item.trainRecordId}` })
        }
    }
}
</script>

<style lang="scss" scoped>
.header-section {
    padding: 20px 15px 45px 15px;
    background-color: #165DFF;
    color: white;

    .header-section-text {
        display: flex;
        align-items: center;
    }
}

.text {
    font-weight: bold;
    font-size: 30rpx;
    line-height: 30px;
    margin-left: 10rpx;
}

.card {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 140rpx;
    align-items: center;
    // 方法二：直接使用border
    border-bottom: 2rpx solid #eee;

    // 排除最后一个元素的横线
    &:not(:last-child) {
        border-bottom: 2rpx solid #eee;
    }
}

.btton-container {
    flex: 2;
}

.text-container {
    padding: 10px;
    display: flex;
    height: 130rpx;
    flex-direction: column;
    justify-content: space-between;

    .label-planname {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        width: 300rpx;
        max-width: 400rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .label-score {
        font-size: 32rpx;
        color: #F53F3F;
        font-weight: bold;
        margin-left: 20rpx;
    }
    
    
    .label-icon {
        margin-left: 20rpx;
    }

    .time {
        color: #999999;
    }

}

.integral-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx
}

.integral-list {
    overflow-y: scroll;
    width: 100%;
}
</style>